<template>
  <div class="content">
    <!-- filter -->
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" icon="el-icon-search" @click="getListPage">查询</el-button>
    </filter-form>
    <!-- filter -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      tooltip-effect="dark"
      style="width: 100%;">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="属性id" prop="id" />
      <el-table-column align="center" label="属性名称" prop="name" />
      <el-table-column align="center" label="数据类型" prop="datatype" />
      <el-table-column align="center" label="访问方式" prop="method" />
      <el-table-column align="center" label="属性描述" prop="description" />
      <el-table-column align="center" label="字符串长度" prop="maxlength" />
      <el-table-column align="center" label="最小值" prop="min" />
      <el-table-column align="center" label="最大值" prop="max" />
      <el-table-column align="center" label="步长" prop="step" />
      <el-table-column align="center" label="单位" prop="unit" />
    </el-table>
    <!-- 分页 -->
    <div class="page-box">
      <pagination :total="total" :page.sync="listQuery.pageNum" :size.sync="listQuery.pageSize" @pagination="getListPage" />
    </div>
  </div>
</template>

<script>
import { getListPage } from '@/api/cms/winglinks/product/properties'
export default {
  name: 'Properties',
  props: {
    'serviceId': {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 表格高度
      height: 0,
      tableKey: 0,
      list: null,
      current: 1,
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        serviceId: null,
        name: null
      },
      // 顶部操作栏配置
      filterData: {
        name: {
          key: 'name',
          type: 'input',
          title: '属性名称',
          placeholder: '请输入属性名称'
        }
      }
    }
  },
  watch: {
    serviceId(newval, oldval) {
      if (newval !== oldval) {
        this.listQuery.serviceId = newval
        this.getListPage()
      }
    }
  },
  created() {
    if (this.serviceId) { this.listQuery.serviceId = this.serviceId }
    this.getListPage()
  },
  methods: {
    // 查询列表信息
    getListPage() {
      this.listLoading = true
      // 查询列表信息
      getListPage(this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
</style>
